<template>
  <div id="app">
    <router-view />
    <transition-group name="fade">
      <qm-modal
        v-for="(item,index) in modals"
        :path="item.path"
        :key="'root-modal-'+item.path"
        v-model="item.visible"
        :title="item.title"
        :width="item.width"
        :height="item.height"
        :params="item.params"
        @modal-close="(content)=>{onCloseModal(item,content)}"
      ></qm-modal>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      modals: [],
      modalPath: "/",
      modalVisible: false,
      pageLoading: false,
    };
  },
  mounted() {
    this.$root.openFile = this.openFile;
    this.$root.openModal = this.openModal;
    this.$root.openModalMax = this.openModalMax;
    this.$root.closeModal = this.closeModal;
    //兼容PC端写法
    if (window.$) {
      window.$.open = this.openModal;
    }
  },
  methods: {
    openFile(type, attachmentId) {
      if (type === "pdf") {
        this.openModal(
          "/attachment/pdf",
          () => {},
          { attachmentId: attachmentId },
          "100%",
          "100%",
          { title: "预览文件" }
        );
      } else {
        this.$root.openModal(
          "/attachment/viewer",
          () => {},
          { attachmentId: attachmentId },
          "100%",
          "100%",
          { title: "预览文件" }
        );
      }
    },
    openModalMax(path, callback, params, options = {}) {
      this.openModal(path, callback, params, "100%", "100%", options);
    },
    openModal(path, callback, params, width, height, options = {}) {
      //如果没有callback
      if (callback && !_.isFunction(callback)) {
        options = height;
        height = width;
        width = params;
        params = callback;
        callback = null;
      }
      //如果没有params
      if (params && !_.isObject(params) && _.isNumber(params)) {
        options = height;
        height = width;
        width = params;
        params = null;
      }
      //如果没有width
      if (
        width &&
        !_.isNumber(height) &&
        !(height || "").toString().endsWith("%")
      ) {
        options = height;
        height = width;
        width = null;
      }
      //如果没有height
      if (
        height &&
        !_.isNumber(height) &&
        !(height || "").toString().endsWith("%")
      ) {
        options = height;
        height = null;
      }

      let title = "新增 & 保存";
      if (options && options.title) {
        title = options.title;
      } else if (path.includes("view")) {
        title = "查看 & 详情";
      } else if (path.includes("?")) {
        let queryStrs = path.substr(path.indexOf("?") + 1).split("&");
        if (!queryStrs || queryStrs.length === 0) {
          title = "新增 & 保存";
        } else {
          let idx = _.findIndex(queryStrs, (item) => item.includes("Id="));
          title = idx != -1 ? "编辑 & 保存" : title;
        }
      }

      let query = this.$util.getUrlAllParams(path);
      if (query && Object.keys(query).length > 0) {
        params = { ...params, ...query };
      }

      this.modals.push({
        path: path,
        visible: true,
        title: title,
        callback: callback,
        params: params || {},
        width: width || 1100,
        height: height || 650,
      });
    },
    onCloseModal(item, params) {
      item.visible = false;
      this.modals.splice(
        this.modals.findIndex((i) => item.path === i.path),
        1
      );
      if (item.callback && _.isFunction(item.callback)) {
        window.setTimeout(() => {
          item.callback.apply(
            this,
            _.isArray(params) ? params : params ? [params] : []
          );
        }, 100);
      }
    },
    closeModal(path, ...params) {
      if (this.modals.length > 0) {
        let modal = this.modals[this.modals.length - 1];
        if (path) {
          modal = _.findLast(this.modals, { path: path });
        }
        if (modal) {
          this.onCloseModal(modal, params);
        } else {
          console.error("未找到匹配的模态窗口，无法执行关闭");
        }
      } else {
        console.error("当前没有激活的模态窗口");
      }
    },
  },
};
</script>
